<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-table border stripe :data="skuList" v-loading="loading">
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column
          label="名称"
          prop="skuName"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column label="描述" prop="skuDesc" align="center"></el-table-column>
        <el-table-column label="默认图片" width="150" align="center">
          <template v-slot="{ row }">
            <el-image
                style="height: 100px"
                :src="row.skuDefaultImg"
                fit="fill"
                :lazy="true"
                :preview-src-list="[row.skuDefaultImg]"
                :preview-teleported="true"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="重量"
          prop="weight"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column label="价格" prop="price" width="80" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              v-if="row.isSale === 0"
              type="info"
              size="small"
              icon="ele-Top"
              @click="onSale(row)"
            ></el-button>
            <el-button
              v-else
              type="success"
              size="small"
              icon="ele-Bottom"
              @click="cancelSale(row)"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="ele-Edit"
              @click="ElMessage.info('正在开发中')"
            ></el-button>
            <el-button
              type="info"
              size="small"
              icon="ele-Warning"
              @click="openDrawer(row)"
            ></el-button>
            <el-button
              type="danger"
              size="small"
              icon="ele-Delete"
              @click="deleteSku(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:page-size="pageSize"
        :page-count="pageCount"
        :pager-count="5"
        :page-sizes="[3, 5, 7, 9]"
        v-model:current-page="currentPage"
        layout=" prev, pager, next, sizes"
      />
    </el-card>

    <el-drawer v-model="drawer" direction="rtl" size="50%" :with-header="false">
      <el-row :gutter="20" class="row">
        <el-col :span="5" class="col-left">名称</el-col>
        <el-col :span="19">{{ skuDetail.skuName }}</el-col>
      </el-row>
      <el-row :gutter="20" class="row">
        <el-col :span="5" class="col-left">描述</el-col>
        <el-col :span="19">{{ skuDetail.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="20" class="row">
        <el-col :span="5" class="col-left">价格</el-col>
        <el-col :span="19">{{ skuDetail.price }}</el-col>
      </el-row>
      <el-row :gutter="20" class="row">
        <el-col :span="5" class="col-left">平台属性</el-col>
        <el-col :span="19">
          <el-tag
            type="primary"
            size="small"
            v-for="item in skuDetail.skuAttrValueList"
            :key="item.id"
            >{{ item.attrName }}-{{ item.valueName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row :gutter="20" class="row">
        <el-col :span="5" class="col-left">销售属性</el-col>
        <el-col :span="19">
          <el-tag
            type="primary"
            size="small"
            v-for="item in skuDetail.skuSaleAttrValueList"
            :key="item.id"
            >{{ item.saleAttrName }}-{{ item.saleAttrValueName }}</el-tag
          ></el-col
        >
      </el-row>
      <el-row :gutter="20" class="row">
        <el-col :span="5" class="col-left">商品图片</el-col>
        <el-col :span="19">
          <el-carousel
            ref="carousel"
            trigger="click"
            height="400px"
            class="carousel"
          >
            <el-carousel-item
              v-for="item in skuDetail.skuImageList"
              :key="item.id"
            >
              <img
                :src="item.imgUrl"
                style="width: 400px; height: 400px"
                alt=""
              />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Sku",
});
</script>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from "vue";
import { ElCarousel, ElMessage } from "element-plus";
import {
  reqAllSkuList,
  reqOnSale,
  reqCancelSale,
  type skuInfoListType,
  type skuInfoItemType,
  reqDeleteSku,
  reqSkuDetail,
  type skuInfoItemDetailType,
} from "@/api/sku";
//定义页码数据
const pageSize = ref(8);
const pageCount = ref(0);
const currentPage = ref(1);

const loading = ref(false);

//定义请求回来的数据
const skuList = ref<skuInfoListType>([]);

//初始化请求封装
const initData = async () => {
  loading.value = true;
  try {
    const result = await reqAllSkuList(currentPage.value, pageSize.value);
    skuList.value = result.records;
    pageCount.value = result.pages;
    loading.value = false;
  } catch (e: any) {
    ElMessage.error(e.message);
    loading.value = false;
  }
};
//初始化请求
onMounted(() => {
  initData();
});

//上下架的回调函数
const onSale = async (row: skuInfoItemType) => {
  loading.value = true;
  try {
    await reqOnSale(row.id as number);
    ElMessage.success("上架成功");
    initData();
    loading.value = false;
  } catch (e: any) {
    ElMessage.error(e.message);
  }
};
const cancelSale = async (row: skuInfoItemType) => {
  loading.value = true;
  try {
    await reqCancelSale(row.id as number);
    ElMessage.success("下架成功");
    initData();
    loading.value = false;
  } catch (e: any) {
    ElMessage.error(e.message);
  }
};

//删除
const deleteSku = async (row: skuInfoItemType) => {
  try {
    await reqDeleteSku(row.id as number);
    ElMessage.success("删除成功");
    initData();
  } catch (e: any) {
    ElMessage.error(e.message);
  }
};

//页码
watch([pageSize, currentPage], () => {
  initData();
});

//控制抽屉的代码
const drawer = ref(false);

//定义sku详细信息的初始数据
const skuDetail = ref<skuInfoItemDetailType>({
  id: 0,
  spuId: 0, //所在的spuId
  price: 0, //当前sku的价格
  skuName: "", //当前sku的名称
  skuDesc: "", //当前sku的描述
  weight: "", //当前sku的重量
  tmId: 0, //当前sku所在的品牌id
  category3Id: 0, //当前sku所在的三级分类的id
  skuDefaultImg: "", //当前sku的默认的图片
  isSale: 0, //当前sku是否上架
  createTime: "", //当前sku的创建时间
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
});
//打开抽屉回调函数
const openDrawer = async (row: skuInfoItemType) => {
  drawer.value = true;
  try {
    const result = await reqSkuDetail(row.id as number);
    skuDetail.value = result;

    //在拿到数据之后，我们手动的切换幻灯片(放在异步)
    nextTick(() => {
      carousel.value?.setActiveItem(0);
    });
  } catch (e: any) {
    ElMessage(e.message);
  }
};

//注意：如果需要给组件定义类型，我们可以使用如下的方式
const carousel = ref<InstanceType<typeof ElCarousel> | null>(null);
</script>

<style scoped lang="scss">
.row {
  margin-bottom: 20px;
  .col-left {
    font-weight: bold;
  }
}

:deep(.el-carousel__indicator) {
  width: 10px;
  height: 10px;
  background: green;
  border-radius: 50%;
  margin: 0 10px;
  &.is-active {
    background: pink;
  }
}
</style>
